<style lang="less" scoped>
@import "./index.less";
</style>

<template>
  <div id="login">
    <div id="login_header"></div>
    <div id="logo" class="animated fadeInUp">
      <div class="logo"><img :src="`${publicPath}static/logo.png`" /></div>
      <div class="info">
        <h3>{{ sysInfo.sys_name }}</h3>
        <h5>{{ sysInfo.sys_name_sub }}</h5>
      </div>
    </div>
    <div id="login_box">
      <div id="login_form" class="simple animated" :class="{ flipInY: !loaded, shake: formShake }">
        <div class="wrap">
          <form @submit.prevent="checkAuth">
            <dl>
              <dt>用户名：</dt>
              <dd>
                <a-input v-model.trim="username" ref="username" placeholder="请输入用户名">
                  <a-icon slot="prefix" type="user" />
                  <a-tooltip slot="suffix" title="不记住此用户名" v-if="rememberName" @click="cancelRem">
                    <a-icon type="close" />
                  </a-tooltip>
                </a-input>
              </dd>
            </dl>
            <dl>
              <dt>密码：</dt>
              <dd>
                <a-input-password type="password" v-model.trim="password" ref="password" placeholder="请输入密码">
                  <a-icon slot="prefix" type="lock" />
                </a-input-password>
              </dd>
            </dl>
            <dl>
              <dd class="clearfix">
                <!-- <a-tooltip title="开启后下次登录时免输用户名" v-if="!this.sso.on"> -->
                <a-tooltip title="开启后下次登录时免输用户名">
                  <a-switch size="small" v-model="rememberMe" />
                  记住我
                </a-tooltip>
                <div style="float: right;">
                  <a href="javascript://" @click="forgetPwd">忘记密码?</a>
                </div>
              </dd>
            </dl>
            <dl>
              <dd>
                <a-button type="primary" htmlType="submit" block size="large" @click.prevent="checkAuth">立即登录</a-button>
              </dd>
            </dl>
          </form>
        </div>
      </div>
      <div id="slider">
        <img src="./img1.png" alt="" />
      </div>
    </div>
    <div id="copyright" class="animated fadeInDown">
      <span>版本号：2.0</span>
      <span>
        版权所有：
        <a :href="sysInfo.author_url" target="_blank">{{ sysInfo.author_name }}</a>
      </span>
      <span>
        技术支持：
        <a :href="sysInfo.author_url" target="_blank">{{ sysInfo.author_name }}</a>
      </span>
      <span>最佳分辨率：1920*1080</span>
    </div>
    <div class="application">
      <a-popover placement="bottom">
        <template slot="content">应用下载</template>
        系统推荐使用谷歌浏览器：
        <a class="downLoad" href="javascript://" @click="applicationButton()">
          <i class="material-icons">&#xe2c0;</i>
          点击下载
        </a>
      </a-popover>
    </div>
  </div>
</template>

<script>
// import Cookies from 'js-cookie';
// import encrypt from "./encrypt"
// import JSEncrypt from "@/jsencrypt"
let menuList = [];
export default {
  name: "auth-login-default",
  data() {
    return {
      // 表单
      username: "",
      password: "",
      submitting: false,
      // 记住我
      rememberMeCookieName: process.env.VUE_APP_GLOBAL_VAR + "_rememberName",
      rememberMe: false,
      rememberName: false,
      // 动画
      loaded: false,
      formShake: false,
    };
  },
  computed: {
    sso() {
      return this.$store.getters.sso;
    },
    publicPath() {
      return this.$store.getters.publicPath;
    },
    sysInfo() {
      return this.$store.getters.sysInfo;
    },
  },
  methods: {
    // 谷歌下载
    applicationButton() {
      window.location.href = "static/downGoogle.exe";
    },
    async checkAuth(e) {
      let self = this;
      // 校验
      if (!this.username) {
        this.$message.warning("请输入用户名!");
        this.$refs.username.focus();
        this.formShake = true;
        setTimeout(() => {
          this.formShake = false;
        }, 750);
        return false;
      }
      if (!this.password) {
        this.$message.warning("请输入密码!");
        this.$refs.password.focus();
        this.formShake = true;
        setTimeout(() => {
          this.formShake = false;
        }, 750);
        return false;
      }

      // 请求
      // console.log(encrypt)
      this.submitting = true;
      //   let username = encrypt.encrypt(this.username);
      //   let password = encrypt.encrypt(this.password)
      this.$http.post("login/login", {
          username: this.username,
          password: this.password,
        }).then((res) => {
          if (res.code == 0) {
            self.$store.dispatch("login", res.data);
            this.$router.push('/')
          }
        });

      // if (this.sso.on) {
      //   // 单点登录使用postMessage发送表单信息
      //   let ssoIframe = document.getElementById("ssoIframe").contentWindow;
      //   ssoIframe.postMessage(
      //     {
      //       username: this.username,
      //       password: this.password,
      //     },
      //     self.sso.origin
      //   );
      //   // 判断是否记住用户名 如果是存入Cookies 没有则删除
      //   // if (self.rememberMe) {
      //   //   Cookies.set(self.rememberMeCookieName, self.username)
      //   // } else {
      //   //   Cookies.remove(self.rememberMeCookieName)
      //   // }

      //   self.password = ""; //登录后清除密码

      //   // 因为这里只能发消息，所以登录成功的逻辑在App.vue中监听时处理
      //   this.submitting = false;
      // } else {
      //   // 常规登录请求服务端授权api
      //   self.$store
      //     .dispatch("login", {
      //       username: username,
      //       password: password,
      //     })
      //     .then((res) => {
      //       if (!res.code) {
      //         // 是否保存用户名到cookie
      //         // if (this.rememberMe) {
      //         //   Cookies.set(this.rememberMeCookieName, this.username)
      //         // }
      //         self.$message.success("登录成功");
      //         let redirect = self.$router.currentRoute.query.redirect || "/";
      //         if (redirect == "/403" || redirect == "/404") {
      //           redirect = "/";
      //         }
      //         // 判断当前用户是否有重定向这个url
      //         let arr = this.$store.getters.assets.permissions.menus;
      //         this.flattenArr(arr);
      //         let redirUrl = redirect.split("?")[0]; // 去掉redirect中的参数部分
      //         if (menuList.every((item) => item.url !== redirUrl)) {
      //           redirect = "/";
      //         }
      //         self.$router.push(redirect);
      //       } else {
      //         self.username = "";
      //         self.password = "";
      //         this.$refs.username.focus();
      //         this.formShake = true;
      //         setTimeout(() => {
      //           this.formShake = false;
      //         }, 750);
      //       }
      //       this.submitting = false;
      //     });
      // }
    },
    // 数组扁平化
    flattenArr(arr) {
      for (let item of arr) {
        menuList = menuList.concat(item.child);
        if (item.child.length) {
          this.flattenArr(item.child);
        }
      }
    },
    cancelRem() {
      this.rememberName = false;
      this.username = "";
      //   Cookies.remove(this.rememberMeCookieName)
      this.$refs.username.focus();
    },
    forgetPwd() {
      this.$emit("forgetPwd");
    },
  },
  mounted() {
    // var rememberName = Cookies.get(this.rememberMeCookieName)
    // 判断本地是否有用户名Cookies
    // if (rememberName) {
    //   this.rememberMe = true;
    //   this.rememberName = true;
    //   this.username = rememberName;
    //   this.$refs.password.focus();
    // } else {
    //   //   Cookies.remove(this.rememberMeCookieName)
    //   this.rememberMe = false;
    //   this.$refs.username.focus();
    // }

    setTimeout(() => {
      this.loaded = true;
    }, 1000);
  },
};
</script>
